<!doctype html>
<html>
<head>
	<meta charset="UTF-8" />
	
	<title>rGallery &beta;</title>
	
	<style type="text/css" media="screen">@import "jqtouch/jqtouch.css";</style>
	<style type="text/css" media="screen">@import "jqtouch/jquery.confirm.css";</style>
	<style type="text/css" media="screen">@import "themes/jqt/theme.css";</style>
	<style type="text/css" media="screen">@import "extensions/jqt.photo.css";</style>
	<script src="jqtouch/jquery-1.4.2.js" type="text/javascript" charset="utf-8"></script>
	<script src="jqtouch/jquery.confirm.js" type="text/javascript" charset="utf-8"></script>
	<script src="jqtouch/jqtouch.js" type="application/x-javascript" charset="utf-8"></script>
	<script src="extensions/jqt.photo.js" type="application/x-javascript" charset="utf-8"></script>
	<script type="text/javascript">
		var jQT = new $.jQTouch({
			slideleftSelector: '#jqt li a, .slide',
			icon: false,
			addGlossToIcon: false,
			statusBar: 'black-translucent',
			preloadImages: [
				'themes/jqt/img/back_button_clicked.png',
				'themes/jqt/img/button_clicked.png'
			]
		});
		
		$(function() {
			$.ajax({
				url: "php/albums.php",
				dataType: 'json',
				success: function(data) {
					jQT.generateGallery("photo", data, {backLink: ''});
					jQT.goToSlide('#photo', 0, 'fade');
				}
			});
			
			window.scrollTo(0, 1);
			
			$('a.showinfo').live('click tap', function(e) {
				$btn = $(this);
				$msg = $btn.attr('msg');
				$lnk = $btn.attr('lnk');
				e.preventDefault();
				
				$.confirm({
					'title'		: 'rGallery',
					'message'	: $msg,
					'buttons'	: {
						'OK'	: {
							'class'	: 'blue',
							'action': function(){
								// Do nothing
							}
						},
						'Follow'	: {
							'class'	: 'gray',
							'action': function(){
								window.location=$lnk;
							}
						}
					}
				});
			});
		});
	</script>
	<style type="text/css" media="screen">
		body {
			padding-bottom:44px;
		}
		#jqt.fullscreen #home .info {
			display: none;
		}
		#jqt #info1, #jqt #info2, #jqt #info3 {
			width: 15%;
		}
		#jqt #info1 {
			left: 1%;
		}
		#jqt #info2 {
			left: 40%;
		}
		#jqt #info3 {
			right: 1%;
		}
	</style>
</head>
<body>
	<div id="jqt">
		<div id="home" class="current" style="display: none;">
			<div class="info">
			</div>
		</div>
	</div>
</body>
</html>